<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #game {
            width: 400px;
            height: 200px;
            position: absolute;
            margin: auto;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        #playground {
            background: #e0ffe0;
            width: 400px;
            height: 200px;
            position: relative;
            overflow: hidden;
        }

        #ball {
            background: #fbb;
            position: absolute;
            width: 20px;
            height: 20px;
            left: 150px;
            top: 100px;
            border-radius: 50%;
        }

        .paddle {
            background: #bbf;
            left: 50px;
            top: 70px;
            position: absolute;
            width: 30px;
            height: 70px;
        }

        #paddleB {
            left: 320px;
        }
    </style>
    <script src="../bower_components/jq/dist/jquery.min.js"></script>
</head>
<body>
<div id="game">
    <div id="scoreboard">
        <div class="score">Player A : <span id="scoreA">0</span></div>
        <div class="score">Player B : <span id="scoreB">0</span></div>
    </div>
    <div id="playground">
        <div id="paddleA" class="paddle"></div>
        <div id="paddleB" class="paddle"></div>
        <div id="ball"></div>
    </div>
</div>
</body>
<script>
    const KEY = {
        UP: 38,
        DOWN: 40,
        W: 87,
        S: 83
    }

    // 全局变量数据存储状态
    const pingPang = {
        scoreA: 0,
        scoreB: 0
    };
    pingPang.pressKeys = [];
    pingPang.ball = {
        speed: 5,
        x: 150,
        y: 150,
        directionX: 1,
        directionY: 1
    };

    $(function () {
        pingPang.timer = setInterval(gameLoop, 30)
        //标记键盘摁下状态
        $(document).keydown(function (e) {
                pingPang.pressKeys[e.which] = true
            }
        )
        $(document).keyup(function (e) {
                pingPang.pressKeys[e.which] = false
            }
        )
    })

    function gameLoop() {
        movePaddles()
        moveBall()
    }

    function movePaddles() {
        let top
        if (pingPang.pressKeys[KEY.UP]) {
            top = parseInt($('#paddleB').css('top'))
            $('#paddleB').css('top', top - 5)
        }
        if (pingPang.pressKeys[KEY.DOWN]) {
            top = parseInt($('#paddleB').css('top'))
            $('#paddleB').css('top', top + 5)
        }
        if (pingPang.pressKeys[KEY.W]) {
            top = parseInt($('#paddleA').css('top'))
            $('#paddleA').css('top', top - 5)
        }
        if (pingPang.pressKeys[KEY.S]) {
            top = parseInt($('#paddleA').css('top'))
            $('#paddleA').css('top', top + 5)
        }

    }

    function moveBall() {
        let playgroundHeight = parseInt($('#playground').height())
        let playgroundWidth = parseInt($('#playground').width())
        let ball = pingPang.ball
        //检测球台边沿
        //检测底边
        if (ball.y + ball.speed * ball.directionY > playgroundHeight) {
            ball.directionY = -1
        }
        //检测顶边
        if (ball.y + ball.speed * ball.directionY < 0) {
            ball.directionY = 1
        }
        //检测右边
        if (ball.x + ball.speed * ball.directionX > playgroundWidth) {
            ball.directionX = -1
        }
        //检测左边
        if (ball.x + ball.speed * ball.directionX < 0) {
            ball.directionX = 1
        }
        ball.x += ball.speed * ball.directionX
        ball.y += ball.speed * ball.directionY

        //检测球拍和球碰撞
        //左边球拍
        let paddleAX = parseInt($('#paddleA').css('left')) + parseInt($('#paddleA').css('width'))
        let paddleAYBottom = parseInt($('#paddleA').css('top')) + parseInt($('#paddleA').css('height'))
        let paddleAYTop = parseInt($('#paddleA').css('top'))
        if (ball.x + ball.speed * ball.directionX < paddleAX) {
            if (ball.y + ball.speed * ball.directionY <= paddleAYBottom && ball.y + ball.speed * ball.directionY >= paddleAYTop) {
                ball.directionX = 1
            }
        }

        //右边球拍
        let paddleBX = parseInt($('#paddleB').css('left'))
        let paddleBYBottom = parseInt($('#paddleB').css('top')) + parseInt($('#paddleB').css('height'))
        let paddleBYTop = parseInt($('#paddleB').css('top'))
        if (ball.x + ball.speed * ball.directionX >= paddleBX) {
            if (ball.y + ball.speed * ball.directionY <= paddleBYBottom && ball.y + ball.speed * ball.directionY >= paddleBYTop) {
                ball.directionX = -1
            }
        }
        //检测丢分
        if (ball.x + ball.speed * ball.directionX >= playgroundWidth) {
            //玩家B丢分
            //重置乒乓球
            ball.x = 250
            ball.y = 100
            ball.directionX = -1
            pingPang.scoreA++
            $('#scoreA').html(pingPang.scoreA)
        }

        if (ball.x + ball.speed * ball.directionX < 0) {
            //玩家A丢分
            //重置乒乓球
            ball.x = 150
            ball.y = 100
            ball.directionX = 1
            pingPang.scoreB++
            $('#scoreB').html(pingPang.scoreB)
        }

        $('#ball').css({
            "left": ball.x,
            "top": ball.y
        })
    }


    //
</script>
</html>
